<template></template>

<script setup lang="ts">
import * as L from 'leaflet'
const props = defineProps({
  selectCity: {
    type: String,
    default: () => {
      return ''
    }
  }
})

let point = ref([])

const baseMap = inject('baseMap')

const layer = L.layerGroup().addTo(toRaw(baseMap.value))

const handleInitMap = () => {
  let marker
  if (!point.value.length) return
  point.value.forEach(item => {
    if (!item.parent) {
      item.marker = null
      marker = L.marker(item.properties.centroid.reverse(), {
        icon: L.divIcon({
          className: 'my-div-icon',
          html: `<div class="city-point">
                <p class="city-point-label">${item.properties.name}</p>
          </div>`
        })
      })
      layer.addLayer(marker)
    }
  })
}
watch(
  () => props.selectCity,
  (newV, oldV) => {
    point.value = []
    point.value = newV
    layer.clearLayers()
    handleInitMap()
  },
  {
    immediate: true
  }
)

onMounted(() => {
  point.value = props.selectCity
  handleInitMap()
})

onUnmounted(() => {
  point.value = []
  layer.clearLayers()
})
</script>

<style lang="scss">
.city-point {
  display: flex;
  align-items: center;
  flex-direction: column;

  .city-point-label {
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
  }
  img {
    width: 20px;
    height: 20px;
  }
}
</style>
